<template>
  <yd-layout>
    <router-view></router-view>
    <yd-tabbar slot="tabbar" active-color = "#f67">
      <yd-tabbar-item title="全部试用" link="/onTrial/trial/all" :active = "path === '/onTrial/trial/all'">
        <yd-icon name="home" slot="icon" size="0.44rem" v-show = "path === '/onTrial/trial/all'"></yd-icon>
        <yd-icon name="home-outline" slot="icon" size="0.44rem" v-show = "path !== '/onTrial/trial/all'"></yd-icon>
      </yd-tabbar-item>
      <yd-tabbar-item title="历史试用" link="/onTrial/trial/hist" :active = "path === '/onTrial/trial/hist'">
        <yd-icon name="time" slot = "icon" size="0.44rem"></yd-icon>
      </yd-tabbar-item>
      <yd-tabbar-item title="我的试用" link="/onTrial/mytrial" :active = "path === '/onTrial/mytrial'">
        <yd-icon name="ucenter" size="0.44rem" slot="icon" v-show = "path === '/onTrial/mytrial'"></yd-icon>
        <yd-icon name="ucenter-outline" size="0.44rem" slot="icon" v-show = "path !== '/onTrial/mytrial'"></yd-icon>
      </yd-tabbar-item>
    </yd-tabbar>
  </yd-layout>
</template>
<script>
export default {
  name: 'onTrial',
  computed: {
    path () {
      return this.$route.path
    }
  }
}
</script>
<style lang="scss" scoped></style>
